<template>
  <div class="space-y-3">    
    <div class="space-y-3">
      <!-- 包含子文件夹 -->
      <label class="flex items-center space-x-2">
        <input type="checkbox" v-model="includeSubfolders" class="w-4 h-4 text-blue-600 border-gray-300 rounded">
        <span class="text-sm text-gray-700">包含子文件夹</span>
      </label>
      
      <!-- 文件名模式 -->
      <div class="space-y-2">
        <div class="flex items-center space-x-2">
          <input 
            v-model="filenamePattern" 
            placeholder="文件名模式" 
            class="flex-1 px-3 py-2 border rounded text-sm"
          >
          <select v-model="filenameMatchType" class="px-3 py-2 border rounded text-sm">
            <option value="contains">包含</option>
            <option value="starts_with">开头是</option>
            <option value="ends_with">结尾是</option>
            <option value="regex">正则表达式</option>
          </select>
        </div>
        
        <div class="flex space-x-2">
          <button @click="markByFilename" class="px-3 py-1.5 bg-blue-500 hover:bg-blue-600 text-white text-sm rounded-lg">
            标记匹配的文件
          </button>
          <button @click="unmarkByFilename" class="px-3 py-1.5 bg-gray-500 hover:bg-gray-600 text-white text-sm rounded-lg">
            取消标记匹配的文件
          </button>
        </div>
      </div>
      
      <!-- 路径模式 -->
      <div class="space-y-2">
        <div class="flex items-center space-x-2">
          <input 
            v-model="pathPattern" 
            placeholder="路径模式" 
            class="flex-1 px-3 py-2 border rounded text-sm"
          >
          <select v-model="pathMatchType" class="px-3 py-2 border rounded text-sm">
            <option value="contains">包含</option>
            <option value="starts_with">开头是</option>
            <option value="ends_with">结尾是</option>
            <option value="regex">正则表达式</option>
          </select>
        </div>
        
        <div class="flex space-x-2">
          <button @click="markByPath" class="px-3 py-1.5 bg-blue-500 hover:bg-blue-600 text-white text-sm rounded-lg">
            标记匹配的文件
          </button>
          <button @click="unmarkByPath" class="px-3 py-1.5 bg-gray-500 hover:bg-gray-600 text-white text-sm rounded-lg">
            取消标记匹配的文件
          </button>
        </div>
      </div>
      

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const includeSubfolders = ref(false)
const filenamePattern = ref('')
const filenameMatchType = ref('contains')
const pathPattern = ref('')
const pathMatchType = ref('contains')

// 定义emits
const emit = defineEmits<{
  'mark-files': [data: {
    includeSubfolders: boolean
    filenamePattern: string
    filenameMatchType: string
    pathPattern: string
    pathMatchType: string
    action: 'mark' | 'unmark'
  }]
}>()

const markByFilename = () => {
  if (filenamePattern.value.trim()) {
    console.log('按文件名标记:', {
      pattern: filenamePattern.value,
      matchType: filenameMatchType.value,
      includeSubfolders: includeSubfolders.value
    })
    
    emit('mark-files', {
      includeSubfolders: includeSubfolders.value,
      filenamePattern: filenamePattern.value,
      filenameMatchType: filenameMatchType.value,
      pathPattern: '',
      pathMatchType: 'contains',
      action: 'mark'
    })
  }
}

const unmarkByFilename = () => {
  if (filenamePattern.value.trim()) {
    console.log('按文件名取消标记:', {
      pattern: filenamePattern.value,
      matchType: filenameMatchType.value,
      includeSubfolders: includeSubfolders.value
    })
    
    emit('mark-files', {
      includeSubfolders: includeSubfolders.value,
      filenamePattern: filenamePattern.value,
      filenameMatchType: filenameMatchType.value,
      pathPattern: '',
      pathMatchType: 'contains',
      action: 'unmark'
    })
  }
}

const markByPath = () => {
  if (pathPattern.value.trim()) {
    console.log('按路径标记:', {
      pattern: pathPattern.value,
      matchType: pathMatchType.value,
      includeSubfolders: includeSubfolders.value
    })
    
    emit('mark-files', {
      includeSubfolders: includeSubfolders.value,
      filenamePattern: '',
      filenameMatchType: 'contains',
      pathPattern: pathPattern.value,
      pathMatchType: pathMatchType.value,
      action: 'mark'
    })
  }
}

const unmarkByPath = () => {
  if (pathPattern.value.trim()) {
    console.log('按路径取消标记:', {
      pattern: pathPattern.value,
      matchType: pathMatchType.value,
      includeSubfolders: includeSubfolders.value
    })
    
    emit('mark-files', {
      includeSubfolders: includeSubfolders.value,
      filenamePattern: '',
      filenameMatchType: 'contains',
      pathPattern: pathPattern.value,
      pathMatchType: pathMatchType.value,
      action: 'unmark'
    })
  }
}
</script>
